<template>

<div class="tab-bar-item" @click="itemClick">
  <slot v-if="isActive" name="item-img-active"></slot>
  <slot v-else name="item-img"></slot>
  <div :class="{ active : isActive }">
    <slot name="item-text"></slot>
  </div>
</div>

      <!-- <div class="tab-bar-item"> -->
        <!-- 大小不一，这是图片的问题 -->
        <!-- img是行内块 -->
        <!-- <img src="@/assets/img/tabbar/home.jpg" alt=""> -->
        <!-- 默认文字是行内标签。所以，用div包文字，使层级生效 -->
        <!-- <div>首页</div> -->
      <!-- </div> -->

<!--  不可全部放开，若解注下方的代码，则会报错。template中只允许一个root节点，多个div并列时会报错
      <div class="tab-bar-item">
        <img src="@/assets/img/tabbar/category.jpg" alt="">
        <div>分类</div>

      </div>

      <div class="tab-bar-item">
        <img src="@/assets/img/tabbar/cart.jpeg" alt="">
        <div>购物车</div>
      </div>

      <div class="tab-bar-item">
        <img src="@/assets/img/tabbar/profile.jpeg" alt="">
        <div>我的</div>
      </div>
 -->
</template>

<script>
export default {
  name : 'TabBarItem',
  props:{
    // slot通过属性传值
    path : String
  },
  data(){
    return {
      // isActive : true
    }
  },
  computed:{
    isActive(){
      // 看神来之笔
      //  return this.$route.path == this.path
      // 用字符前缀判断。因可能存在子路由
       return this.$route.path.indexOf( this.path ) !== -1
    }
  },
  methods:{
    itemClick(){
      // console.log(this.$route.path );
      this.$router.replace(this.path );
    }
  }
}
</script>

<style >

/* 横向排列 */
.tab-bar-item {
  flex : 1;
  text-align: center;
  height: 49px ;

}
/* 解决bar中图片过大的问题 */
.tab-bar-item img {
  height: 24px ;
  width: 24px ;

  /* img下方多3个像素，取消该3px，解决如下： */
  vertical-align: middle ;
  /* 上方解决方案执行后，不想完全取消间隔，保留一点空间，解决如下： */
  margin-bottom: 1px ;
}

.active {
color: red ;
}
</style>
